<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Messages</title>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
                    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
                        
                        <!-- MathJax Configuration and Library -->
                        <script>
                            MathJax = {
                                tex: {
                                    inlineMath: [['$', '$'], ['\\(', '\\)']],
                                    displayMath: [['$$', '$$'], ['\\[', '\\]']],
                                    processEscapes: true,
                                    processEnvironments: true
                                },
                                options: {
                                    skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
                                }
                            };
                        </script>
                        <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
                        
                        <style>
                            * {
                                margin: 0;
                                padding: 0;
                                box-sizing: border-box;
                                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                            }
                            
                            :root {
                                --bg-primary: #fafafa;
                                --bg-secondary: #ffffff;
                                --bg-tertiary: #f5f5f5;
                                --bg-reasoning: #f8f8f8;
                                --border-color: #e0e0e0;
                                --text-primary: #1a1a1a;
                                --text-secondary: #666666;
                                --user-bg: #f5f5f5;
                                --assistant-bg: #ffffff;
                                --accent-primary: #2196F3;
                                --accent-secondary: #1976D2;
                                --copy-btn: #f5f5f5;
                                --copy-btn-hover: #e8e8e8;
                                --shadow: rgba(0, 0, 0, 0.08);
                            }
                            
                            @media (prefers-color-scheme: dark) {
                                :root {
                                    --bg-primary: #1a1a1a;
                                    --bg-secondary: #242424;
                                    --bg-tertiary: #2a2a2a;
                                    --bg-reasoning: #212121;
                                    --border-color: #333333;
                                    --text-primary: #e8e8e8;
                                    --text-secondary: #a0a0a0;
                                    --user-bg: #242424;
                                    --assistant-bg: #1f1f1f;
                                    --accent-primary: #4A90E2;
                                    --accent-secondary: #357ABD;
                                    --copy-btn: #2a2a2a;
                                    --copy-btn-hover: #333333;
                                    --shadow: rgba(0, 0, 0, 0.3);
                                }
                            }
                            
                            body {
                                background-color: var(--bg-primary);
                                color: var(--text-primary);
                                display: flex;
                                flex-direction: column;
                                height: 100vh;
                                transition: background-color 0.2s, color 0.2s;
                                overflow: hidden;
                            }
                            
                            .container {
                                max-width: 900px;
                                margin: 0 auto;
                                width: 100%;
                                padding: 20px;
                                height: 100%;
                                display: flex;
                                flex-direction: column;
                            }
                            
                            .chat-history {
                                flex: 1;
                                overflow-y: auto;
                                padding: 10px 0;
                                margin-bottom: 20px;
                                scrollbar-width: none;
                                -ms-overflow-style: none;
                            }
                            
                            .chat-history::-webkit-scrollbar {
                                display: none;
                            }
                            
                            .message {
                                display: flex;
                                gap: 16px;
                                padding: 20px 0;
                                border-bottom: 1px solid var(--border-color);
                            }
                            
                            .message:last-child {
                                border-bottom: none;
                            }
                            
                            .icon {
                                width: 32px;
                                height: 32px;
                                border-radius: 4px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex-shrink: 0;
                                font-size: 14px;
                                font-weight: 600;
                                margin-top: 2px;
                                letter-spacing: 0.5px;
                            }
                            
                            .user .icon {
                                background-color: var(--accent-primary);
                                color: white;
                            }
                            
                            .assistant .icon {
                                background-color: var(--text-secondary);
                                color: white;
                            }
                            
                            .content {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                gap: 12px;
                            }
                            
                            .message-body {
                                line-height: 1.7;
                                font-size: 15px;
                            }
                            
                            .message-body p {
                                margin-bottom: 12px;
                            }
                            
                            .message-body ul, .message-body ol {
                                padding-left: 24px;
                                margin-bottom: 12px;
                            }
                            
                            .message-body li {
                                margin-bottom: 6px;
                            }
                            
                            .message-body code {
                                background-color: var(--bg-tertiary);
                                padding: 2px 6px;
                                border-radius: 3px;
                                font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
                                font-size: 13px;
                                border: 1px solid var(--border-color);
                            }
                            
                            .message-body pre {
                                background-color: var(--bg-tertiary);
                                border-radius: 6px;
                                padding: 16px;
                                overflow-x: auto;
                                margin: 12px 0;
                                font-size: 13px;
                                position: relative;
                                border: 1px solid var(--border-color);
                            }
                            
                            .message-body pre code {
                                background: none;
                                border: none;
                                padding: 0;
                            }
                            
                            .message-body pre .copy-icon {
                                position: absolute;
                                top: 8px;
                                right: 8px;
                                background: var(--copy-btn);
                                border-radius: 4px;
                                padding: 6px 8px;
                                cursor: pointer;
                                opacity: 0.5;
                                transition: opacity 0.2s, background-color 0.2s;
                                font-size: 12px;
                            }
                            
                            .message-body pre .copy-icon:hover {
                                opacity: 1;
                                background-color: var(--copy-btn-hover);
                            }
                            
                            .message-body blockquote {
                                border-left: 3px solid var(--text-secondary);
                                padding-left: 16px;
                                margin: 12px 0;
                                color: var(--text-secondary);
                                font-style: italic;
                            }
                            
                            .message-body h1, .message-body h2, .message-body h3,
                            .message-body h4, .message-body h5, .message-body h6 {
                                margin-top: 20px;
                                margin-bottom: 12px;
                                font-weight: 600;
                            }
                            
                            .message-body h1 { font-size: 1.8em; }
                            .message-body h2 { font-size: 1.5em; }
                            .message-body h3 { font-size: 1.3em; }
                            
                            .reasoning-toggle {
                                background-color: var(--bg-reasoning);
                                border: 1px solid var(--border-color);
                                border-radius: 6px;
                                padding: 10px 14px;
                                cursor: pointer;
                                display: flex;
                                align-items: center;
                                gap: 10px;
                                margin-bottom: 12px;
                                transition: all 0.2s;
                                user-select: none;
                            }
                            
                            .reasoning-toggle:hover {
                                background-color: var(--bg-tertiary);
                                border-color: var(--accent-primary);
                            }
                            
                            .reasoning-toggle i {
                                font-size: 14px;
                                transition: transform 0.2s, color 0.2s;
                                color: var(--text-secondary);
                            }
                            
                            .reasoning-toggle span {
                                font-size: 14px;
                                font-weight: 500;
                                color: var(--text-secondary);
                            }
                            
                            .reasoning-container {
                                overflow: hidden;
                                max-height: 0;
                                transition: max-height 0.3s ease;
                            }
                            
                            .reasoning-content {
                                background-color: var(--bg-reasoning);
                                border: 1px solid var(--border-color);
                                border-radius: 6px;
                                padding: 14px;
                                margin-bottom: 12px;
                                font-size: 13px;
                                line-height: 1.6;
                                color: var(--text-secondary);
                                opacity: 0;
                                transform: translateY(-5px);
                                transition: opacity 0.2s ease, transform 0.2s ease;
                            }
                            
                            .reasoning-container.expanded {
                                max-height: 600px;
                                overflow-y: auto;
                            }
                            
                            .reasoning-container.expanded .reasoning-content {
                                opacity: 1;
                                transform: translateY(0);
                            }
                            
                            .actions {
                                display: flex;
                                justify-content: flex-end;
                                margin-top: 8px;
                            }
                            
                            .copy-btn {
                                background-color: var(--copy-btn);
                                border: 1px solid var(--border-color);
                                border-radius: 4px;
                                padding: 6px 10px;
                                cursor: pointer;
                                display: flex;
                                align-items: center;
                                gap: 6px;
                                font-size: 13px;
                                color: var(--text-secondary);
                                transition: all 0.2s;
                                font-weight: 500;
                            }
                            
                            .copy-btn:hover {
                                background-color: var(--copy-btn-hover);
                                border-color: var(--accent-primary);
                            }
                            
                            .copy-btn.copied {
                                background-color: var(--accent-primary);
                                border-color: var(--accent-primary);
                                color: white;
                            }
                            
                            .copy-btn.copied i {
                                animation: checkmark 0.3s ease;
                            }
                            
                            @keyframes checkmark {
                                0% { transform: scale(0.8); opacity: 0; }
                                50% { transform: scale(1.1); }
                                100% { transform: scale(1); opacity: 1; }
                            }
                            
                            /* MathJax styling */
                            mjx-container {
                                overflow-x: auto;
                                overflow-y: hidden;
                            }
                            
                            @media (max-width: 768px) {
                                .message {
                                    gap: 12px;
                                    padding: 16px 0;
                                }
                                
                                .icon {
                                    width: 28px;
                                    height: 28px;
                                    font-size: 12px;
                                }
                                
                                .container {
                                    padding: 15px;
                                }
                                
                                .message-body {
                                    font-size: 14px;
                                }
                            }
                        </style>
                    </head>
    <body>
        <div class="container">
            <div class="chat-history" id="chatHistory">
                <!-- Messages will be inserted here -->
            </div>
        </div>
        
        <script>
            // CHAT_DATA_PLACEHOLDER
            
            // Initialize Marked with highlight.js for code formatting
            marked.setOptions({
                highlight: function(code, lang) {
                    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                    return hljs.highlight(code, { language }).value;
                },
                langPrefix: 'hljs language-',
                gfm: true,
                breaks: true
            });
            
            // Render chat messages
            async function renderChat() {
                const chatHistory = document.getElementById('chatHistory');
                chatHistory.innerHTML = '';
                
                chatData.forEach(message => {
                    const messageElement = document.createElement('div');
                    messageElement.className = `message ${message.role}`;
                    
                    // Only show reasoning toggle if reasoning content exists
                    const showReasoning = message.role === 'assistant' && message.reasoning && message.reasoning.trim() !== '';
                    
                    // Determine icon content
                    const iconContent = message.role === 'user' ? 'U' : 'A';
                    
                    // Message content
                    messageElement.innerHTML = `
                            <div class="icon">${iconContent}</div>
                            <div class="content">
                            ${showReasoning ? `
                            <div class="reasoning-toggle" data-id="${message.id}">
                            <i class="fas fa-lightbulb"></i>
                            <span>Reasoning Process</span>
                            <i class="fas fa-chevron-down" style="margin-left: auto; font-size: 12px;"></i>
                            </div>
                            <div class="reasoning-container" id="reasoning-container-${message.id}">
                            <div class="reasoning-content" id="reasoning-${message.id}">
                            ${message.reasoning}
                            </div>
                            </div>
                            ` : ''}
                            <div class="message-body" id="message-${message.id}">
                                ${marked.parse(message.content)}
                            </div>
                            <div class="actions">
                                <button class="copy-btn" data-id="${message.id}">
                                    <i class="far fa-copy"></i>
                                    <span>Copy</span>
                                </button>
                            </div>
                        </div>
                    `;
                    
                    chatHistory.appendChild(messageElement);
                });
                
                // Add event listeners after rendering
                document.querySelectorAll('.copy-btn').forEach(button => {
                    button.addEventListener('click', handleCopy);
                });
                
                document.querySelectorAll('.reasoning-toggle').forEach(button => {
                    button.addEventListener('click', toggleReasoning);
                });
                
                // Add copy buttons to code blocks
                document.querySelectorAll('pre').forEach(pre => {
                    const copyIcon = document.createElement('div');
                    copyIcon.className = 'copy-icon';
                    copyIcon.innerHTML = '<i class="far fa-copy"></i>';
                    copyIcon.addEventListener('click', () => {
                        const code = pre.querySelector('code').innerText;
                        navigator.clipboard.writeText(code).then(() => {
                            copyIcon.innerHTML = '<i class="fas fa-check"></i>';
                            setTimeout(() => {
                                copyIcon.innerHTML = '<i class="far fa-copy"></i>';
                            }, 2000);
                        });
                    });
                    pre.appendChild(copyIcon);
                });
                
                // Apply syntax highlighting
                hljs.highlightAll();
                
                // Render LaTeX with MathJax
                if (window.MathJax) {
                    await MathJax.typesetPromise();
                }
                
                // Scroll to bottom
                chatHistory.scrollTop = chatHistory.scrollHeight;
            }
            
            // Copy message content to clipboard
            function handleCopy(event) {
                const button = event.currentTarget;
                const messageId = button.getAttribute('data-id');
                const message = chatData.find(m => m.id == messageId);
                
                // Copy markdown content directly
                const textToCopy = message.content;
                
                // Copy to clipboard
                navigator.clipboard.writeText(textToCopy).then(() => {
                    // Visual feedback
                    const originalHTML = button.innerHTML;
                    button.innerHTML = '<i class="fas fa-check"></i><span>Copied</span>';
                    button.classList.add('copied');
                    
                    // Reset after 2 seconds
                    setTimeout(() => {
                        button.innerHTML = originalHTML;
                        button.classList.remove('copied');
                    }, 2000);
                });
            }
            
            // Toggle reasoning content with animation
            function toggleReasoning(event) {
                const button = event.currentTarget;
                const messageId = button.getAttribute('data-id');
                const reasoningContainer = document.getElementById(`reasoning-container-${messageId}`);
                const chevron = button.querySelector('.fa-chevron-down');
                const lightbulb = button.querySelector('.fa-lightbulb');
                
                // Toggle expanded state
                const isExpanded = reasoningContainer.classList.toggle('expanded');
                
                // Rotate the chevron
                if (isExpanded) {
                    chevron.style.transform = 'rotate(180deg)';
                    lightbulb.style.color = 'var(--accent-primary)';
                } else {
                    chevron.style.transform = 'rotate(0deg)';
                    lightbulb.style.color = '';
                }
            }
            
            // Initialize the chat interface
            document.addEventListener('DOMContentLoaded', renderChat);
        </script>
    </body>
</html>
